
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用节流实现性能优化</title>
</head>
<style>
    .box{
        width: 500px;
        height: 500px;
        line-height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
    }
</style>
<script src="./js/lodash.min.js"></script>
<body>
   
    <div class="box"></div>
    <script>

        // 单位时间内，频繁触发事件;    搜索框  搜索  鼠标滚动事件  拖拽事件
        //需求： 鼠标在盒子上移动，里面的数字就会变化 + 1

        // 防抖: 单位时间内，频繁触发事件，只执行最后一次
        
        const box = document.querySelector(".box")

        let i = 1;
        function mouseMove() {
            box.innerHTML = i++
        }

        // 手写节流函数
        // 节流的核心就是利用定时器(setTimeout) 来实现
        // 1.声明一个定时器变量
        // 2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
        // 3.如果没有定时器则开启定时器，记得存到变量里面
        // 3.1定时器里面调用执行的函数
        // 3.2定时器里面要把定时器清空
        
        // function throttle(fn, t) {
        //     let timer = null
        //     return function () {
        //         if (!timer) {
        //             timer = setTimeout(function () {
        //                 fn()
        //                 // 清空定时器
        //                 timer = null
        //             }, t)
        //         }
        //     }
        // }
                
        
      

        // 利用lodash库实现节流 - 500毫秒之后采取+1
        // 语法: _.throttle(fun, 时间)
        box.addEventListener('mousemove', _.throttle(mouseMove, 2000))



        // | 性能优化  | 说明                                     | 使用场景                                                     |
        // | -------- | ---------------------------------------- | ------------------------------------------------------------ |
        // | 防抖     | 单位时间内，频繁触发事件，只执行最后一次  | 搜索框搜索输入、手机号、邮箱验证输入检测                     |
        // | 节流     | 单位时间内，频繁触发事件，只执行一次      | 高频事件:鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动scroll 等等 |


    </script>



</body>
</html>